<!DOCTYPE html>
<html>
<head>
    <title>Clock</title>
      <style>
        body {
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 100px;
        }

        .countdown {
            font-size: 60px;
            color: #333;
        }

        .nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            padding: 20px 0;
        }

        .nav a {
            font-size: 60px;
            color: #333;
            text-decoration: none;
            margin: 0 110px;
        }
    </style>
</head>
<body>
    <div class="nav">
    <a href="#">Schedule</a>
    <a href="#">Clock</a>
    <a href="#">Data</a>
</div>
     <div class="countdown">
   <span id="countdown">倒计时： {{ countdown }}</span>
         </div>
    <script>
        // 获取倒计时元素
        var countdownElement = document.getElementById('countdown');

        // 获取初始倒计时值
        var countdown = {{ countdown }};

        // 更新倒计时函数
        function updateCountdown() {
            // 将倒计时转换为天、小时、分钟和秒
            var days = Math.floor(countdown / (24 * 60 * 60));
            var hours = Math.floor((countdown % (24 * 60 * 60)) / (60 * 60));
            var minutes = Math.floor((countdown % (60 * 60)) / 60);
            var seconds = Math.floor(countdown % 60);

            // 更新倒计时元素的内容
            countdownElement.innerHTML = '倒计时: ' + days + '天 ' + hours + '小时 ' + minutes + '分钟 ' + seconds + '秒';

            // 减少倒计时值
            countdown--;

            // 检查倒计时是否已结束
            if (countdown < 0) {
                clearInterval(interval);
                countdownElement.innerHTML = '倒计时已结束';
            }
        }

        // 每秒钟更新倒计时
        var interval = setInterval(updateCountdown, 1000);
    </script>
</body>
</html>




